<template>
  <div class="p-lr-15">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane key="1" tab="基础字段">
          <a-form-item required label="表格名称">
            <a-input
              v-model:value="data.tableName"
              placeholder="请输入表格名称"
            ></a-input>
          </a-form-item>
          <a-form-item required label="表单分类">
            <a-select v-model:value="data.formtype" placeholder="请选择">
              <a-select-option value="39f97c90-db70-119e-2c8f-1d82e94a52eb">
                办公类
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item required label="数据连接">
            <a-select
              v-model:value="data.linkDb"
              @change="dbChange"
              placeholder="请选择"
            >
              <a-select-option
                v-for="(item, index) in linkDbData"
                :key="index"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item required label="数据表">
            <a-select
              placeholder="请选择"
              v-model:value="data.linktable"
              @change="tableChange"
            >
              <a-select-option
                v-for="(item, index) in linkTableData"
                :key="index"
                :value="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item required label="主键">
            <a-select placeholder="请选择" v-model:value="data.primarykey">
              <a-select-option
                v-for="(item, index) in linkFiledData"
                :key="index"
                :value="item.columnName"
              >
                {{ item.columnName }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item required class="" label="标题字段">
            <a-select placeholder="请选择" v-model:value="data.titleFiled">
              <a-select-option
                v-for="(item, index) in linkFiledData"
                :key="index"
                :value="item.columnName"
              >
                {{ item.columnName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="标题表达式">
            <a-input
              v-model:value="data.titleExpression"
              placeholder="请输入标题表达式"
            ></a-input>
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
              v-model:value="data.note"
              placeholder="请输入备注"
              :rows="4"
            />
          </a-form-item>
          <br />
        </a-tab-pane>

        <a-tab-pane key="2" tab="表单样式">
          <a-form-item label="对齐方式">
            <a-radio-group v-model:value="data.labelPosition">
              <a-radio-button value="left">左对齐</a-radio-button>
              <a-radio-button value="right">右对齐</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="标题宽度">
            <a-slider v-model:value="data.labelWidth" :max="200" />
          </a-form-item>
          <a-form-item label="内容宽度">
            <a-slider v-model:value="data.size" />
          </a-form-item>
          <br />
        </a-tab-pane>
      </a-tabs>

      <!-- <a-form-item
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 21 }"
        label="表单尺寸">
        <a-radio-group v-model="data.size">
          <a-radio-button value="horizontal">水平布局</a-radio-button>
          <a-radio-button value="vertical">垂直布局</a-radio-button>
          <a-radio-button value="inline">内联布局</a-radio-button>
        </a-radio-group>
      </a-form-item> -->
    </a-form>
  </div>
</template>

<script>
  import { Gets, Gettables, Getfileds } from '@/api/databaselink/api'

  export default {
    // eslint-disable-next-line vue/require-prop-types
    props: ['dataAfferent'],
    data() {
      return {
        data: this.dataAfferent,
        linkDbData: [],
        linkTableData: [],
        linkFiledData: [],
      }
    },
    created() {
      console.log('data', this.data)
      Gets().then((res) => {
        if (res.isSuccess) {
          this.linkDbData = res.content.items
        }
      })

      console.log('datatatat', this.data)

      if (this.data.linkDb != undefined) {
        this.dbChange(this.data.linkDb)
      }
      // 需要修改
      if (this.data.linktable != undefined) {
        this.tableChange(this.data.linktable)
      }
    },

    methods: {
      dbChange(e) {
        Gettables({ id: e }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            console.log(res)
            this.linkTableData = res.content
          }
        })
      },
      tableChange(e) {
        Getfileds({ id: this.data.linkDb, table: e }).then((res) => {
          if (res.isSuccess) {
            console.log(res)
            this.linkFiledData = res.content
          }
        })
      },
    },
  }
</script>
